<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏渲染</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            overflow: hiddden;
        }

        body {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <script type="importmap">
    {
        "imports": {
        "three": "../three/v170/three.module.min.js",
        "three/addons/": "../three/v170/"
        }
    }
    </script>
</head>

<body>
<!-- 
https://codepen.io/quentinhocde/pen/QwPjJe  示例地址 2025年2月13日21:51:58    
-->
    <script src="../static/js/echarts.min-5.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
    <script type="module">
        import * as THREE from 'three';
        import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
        import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from "three/addons/renderers/CSS3DRenderer.js";
        import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DragControls } from 'three/addons/controls/DragControls.js';
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        function threejs() {
            this.shapeX = 0.5;
            this.shapeY = 100;
            this.shapeZ = 100;
            this.shapeColor = 0xffffff;
        }

        threejs.prototype.init = function init() {
            this.scene = new THREE.Scene();
            this.camera();
            this.renderer();
            this.light();
            this.floor();
            this.initShape();
            this.render();
        };

        threejs.prototype.camera = function camera() {
            this.camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000);
            this.camera.position.y = 500;
            this.camera.position.z = 500;
            this.camera.position.x = 500;
            this.camera.updateProjectionMatrix();
            this.camera.lookAt(this.scene.position);
        };

        threejs.prototype.renderer = function renderer() {
            this.renderer = new THREE.WebGLRenderer({ antialias: true });
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.renderer.setClearColor(0xF9F8ED, 1);
            this.renderer.shadowMapEnabled = true;
            this.renderer.shadowMapType = THREE.PCFSoftShadowMap;
            document.body.appendChild(this.renderer.domElement);
        };

        threejs.prototype.light = function light() {
            var shadowlight = new THREE.DirectionalLight(0xffffff, 1.8);
            shadowlight.position.set(0, 50, 0);
            shadowlight.castShadow = true;
            shadowlight.shadowDarkness = 0.1;
            this.scene.add(shadowlight);

            var light = new THREE.DirectionalLight(0xffffff, 1.8);
            light.position.set(60, 100, 20);
            this.scene.add(light);

            var backLight = new THREE.DirectionalLight(0xffffff, 1);
            backLight.position.set(-40, 100, 20);
            this.scene.add(backLight);
        };

        threejs.prototype.floor = function floor() {
            var geometry = new THREE.PlaneGeometry(500, 500, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0xF9F8ED });
            this.floor = new THREE.Mesh(geometry, material);
            this.floor.material.side = THREE.DoubleSide;
            this.floor.position.y = -200;
            this.floor.position.z = -100;
            this.floor.rotation.x = 90 * Math.PI / 180;
            this.floor.rotation.y = 0;
            this.floor.rotation.z = 0;
            this.floor.doubleSided = true;
            this.floor.receiveShadow = true;
            this.scene.add(this.floor);
        };

        threejs.prototype.initShape = function initShape() {
            this.myArray = new THREE.Group();
            this.scene.add(this.myArray);
            var lx = 0;
            var ly = 0;
            var lz = 0;

            for (var i = 0; i < 27; i++) {
                this.geometry = new THREE.BoxGeometry(50, 50, 50);
                this.material = new THREE.MeshLambertMaterial({ color: 0x202020, shading: THREE.FlatShading });
                this.shape = new THREE.Mesh(this.geometry, this.material);
                this.shape.castShadow = true;
                this.shape.receiveShadow = false;

                if (lx % 3 == 0) {
                    lx = 0;
                    if (ly % 3 == 0) {
                        lz += 1;
                        ly = 0;
                    }
                    ly += 1;
                }

                this.shape.position.x = lx * 55;
                this.shape.position.y = ly * 55;
                this.shape.position.z = lz * 55;

                console.log(this.shape);
                this.myArray.add(this.shape);

                this.tl = new TimelineMax({ repeat: -1, repeatDelay: 1, delay: ly * 0.05 });
                this.tl.to(this.shape.scale, 0.7, { x: 0, y: 0, z: 0, ease: Expo.easeOut });
                this.tl.to(this.shape.scale, 0.7, { x: 1, y: 1, z: 1, ease: Expo.easeOut });
                console.log(ly);
                lx += 1;
            }
        };

        threejs.prototype.render = function render() {
            requestAnimationFrame(this.render.bind(this));
            this.renderer.render(this.scene, this.camera);
        };

        var shape = new threejs();
        shape.init();
    </script>
</body>
</htm>